:root {
  --logo-size: 22;
  --logo-width: calc((var(--logo-size) / 4) * 1em);
}

.logo {
  font-size: 1rem;
  width: var(--logo-width);
  transform: scale(1) rotate(0deg);
  transition: transform var(--layout-transition-extra-fast);
}

.logo:hover {
  transform: scale(1.1) rotate(180deg);
}

.logo:active {
  transform: scale(1.2) rotate(180deg);
}

.logo,
.logo-circle,
.logo-cross-x,
.logo-cross-y {
  transform-origin: center;
}

.logo {
  animation-name: shrink;
  animation-duration: 0.4s;
  animation-timing-function: var(--layout-timing-bounce);
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  animation-fill-mode: backwards;
}

.logo-circle {
  animation-name: grow;
  animation-duration: 0.4s;
  animation-timing-function: var(--layout-timing-ease);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.logo-cross-x {
  animation-name: grow-x, spin;
  animation-duration: 0.4s, 0.6s;
  animation-timing-function: var(--layout-timing-bounce), var(--layout-timing-ease);
  animation-iteration-count: 1, 1;
  animation-delay: 0.4s, 0.8s;
  animation-fill-mode: backwards, forwards;
}

.logo-cross-y {
  animation-name: grow-y, spin;
  animation-duration: 0.4s, 0.6s;
  animation-timing-function: var(--layout-timing-bounce), var(--layout-timing-ease);
  animation-iteration-count: 1, 1;
  animation-delay: 0.2s, 0.8s;
  animation-fill-mode: backwards, forwards;
}

.logo-circle {
  fill: hsl(var(--theme-primary-120));
}

.logo-cross-x,
.logo-cross-y {
  fill: hsl(var(--theme-primary-010));
}

@keyframes grow {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes grow-x {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes grow-y {
  0% {
    transform: scaleY(0);
  }

  100% {
    transform: scaleY(1);
  }
}

@keyframes shrink {
  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  0% {
    transform: rotate(-360deg);
  }

  100% {
    transform: rotate(0);
  }
}
